<template>
  <div>

    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="审核状态 1待审核、2已审核通过、3已审核拒绝" prop="addStatus">
          <el-form-item label="用户编号">
            <el-input placeholder="请输入用户编号" style="width: 200px" v-model="queryParams.userId"/>
          </el-form-item>
          <el-select v-model="queryParams.addStatus" placeholder="请选择状态">
            <el-option value="1" label="1待审核"></el-option>
            <el-option value="2" label="2已审核通过"></el-option>
            <el-option value="3" label="3已审核拒绝"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" type="info" plain @click="refReshQuery()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="AuditRecordsList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户id" align="center"></el-table-column>
        <el-table-column prop="wechatNumber" label="微信名称" align="center"></el-table-column>
        <el-table-column prop="addWechatId" label="待审核项目的ID" align="center"></el-table-column>
        <el-table-column prop="auditType" label="审核类型" align="center"></el-table-column>
        <el-table-column prop="addStatus" label="审核状态：1待审核、2已审核通过、3已审核拒绝" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag type="primary" v-if="scope.row.addStatus == 1">待审核</el-tag>
            <el-tag type="primary"  v-if="scope.row.addStatus == 2">已审核通过</el-tag>
            <el-tag type="danger" v-if="scope.row.addStatus == 3">已审核拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditDetails" label="审核详情" align="center"></el-table-column>
        <el-table-column label="审核图片" >
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.auditImg" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.auditImg)"
                        :preview-src-list="splitStr(scope.row.auditImg)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="deletingById(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openEditDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>


    <el-dialog :visible.sync="insertDialog" :title="title">
      <el-form label-width="120px" :model="insertObj" :rules="rules" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户id" prop="userId">
              <el-input placeholder="请输入用户id" style="width: 240px" v-model="insertObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待审核项目的ID" prop="addWechatId">
              <el-input placeholder="请输入待审核项目的ID" style="width: 240px" v-model="insertObj.addWechatId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号码" prop="wechatNumber">
              <el-input placeholder="请输入微信号码" style="width: 240px" v-model="insertObj.wechatNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核类型" prop="auditType">
              <el-input placeholder="请输入审核类型" style="width: 240px" v-model="insertObj.auditType"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态" prop="addStatus">
              <el-select v-model="insertObj.addStatus" placeholder="请选择状态">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="已审核通过"></el-option>
                <el-option value="3" label="已审核拒绝"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核详情" prop="auditDetails">
              <el-input placeholder="请输入审核详情" style="width: 240px" v-model="insertObj.auditDetails"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核图片" prop="qrCode">
              <ImageUpload v-model="insertObj.auditImg" limit="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetInsertObj()">重置</el-button>
            <el-button plain type="warning" @click.native="submitInsert()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="updateDialog" :title="title">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户id">
              <el-input placeholder="请输入用户id" style="width: 240px" v-model="updateObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号码" prop="wechatNumber">
              <el-input placeholder="请输入微信号码" style="width: 240px" v-model="updateObj.wechatNumber"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待审核项目的ID">
              <el-input placeholder="请输入待审核项目的ID" style="width: 240px" v-model="updateObj.addWechatId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核类型">
              <el-input placeholder="请输入审核类型" style="width: 240px" v-model="updateObj.auditType"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核状态">
              <el-select v-model="updateObj.addStatus" placeholder="请选择状态">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="已审核通过"></el-option>
                <el-option value="3" label="已审核拒绝"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核详情">
              <el-input placeholder="请输入审核详情" style="width: 240px" v-model="updateObj.auditDetails"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审核图片">
              <ImageUpload v-model="updateObj.auditImg" limit="2"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetUpdateObj()">重置</el-button>
            <el-button plain type="warning" @click="submitUpdate()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
//引入api接口
import {deleteAuditRecords, getAuditRecords,insertAuditRecords,updateAuditRecords} from "@/api/auditRecords/auditRecords";
export default {
  name: "AuditRecords",
  data(){
    return {
      queryParams:{current:1,size:8,total:0},//查询对象
      AuditRecordsList:[],//展示数据集合
      title:"",//弹窗标题
      insertDialog:false,//新增弹窗
      loading:true,
      //新增对象
      insertObj:{
        userId:"",//用户id
        addWechatId:"",//待审核项目的ID
        auditType:"",//审核类型
        addStatus:"",//审核状态
        auditDetails:"",//审核详情
        auditImg:"",//审核图片
        wechatNumber:""//微信号码
      },
      updateDialog:false,//修改弹窗
      //修改对象
      updateObj:{
        userId:"",//用户id
        addWechatId:"",//待审核项目的ID
        auditType:"",//审核类型
        addStatus:"",//审核状态
        auditDetails:"",//审核详情
        auditImg:"",//审核图片
        wechatNumber:""//微信号码
      },
      //规则
      rules: {
        userId: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
        addWechatId: [{ required: true, message: '请输入待审核项目的ID', trigger: 'blur' }],
        auditType: [{ required: true, message: '请输入审核类型', trigger: 'blur' }],
        addStatus: [{ required: true, message: '请输入审核状态', trigger: 'blur' }],
        auditDetails: [{ required: true, message: '请输入审核详情', trigger: 'blur' }],
        auditImg: [{ required: true, message: '请输入审核图片', trigger: 'blur' }],
        wechatNumber: [{ required: true, message: '请输入微信号码', trigger: 'blur' }],
      }
    }
  },
  methods:{
    //显示首图
    viewFristImg(ele){
      if (ele != null && ele != ''){
        //拆分
        const imageArray = ele.split(",");
        //返回结果
        return imageArray[0];
      }
    },
    //拆分图片方法
    splitStr(ele) {
      //判断图片不为 null 且 图片不是 ''
      if (ele != null && ele != '') {
        //返回拆分结果
        return ele.split(",");
      } else {
        //否则返回 null
        return null;
      }
    },
    //查询方法
    getList(){
      //打开加载
      this.loading = true;
      //调用api接口
      getAuditRecords(this.queryParams).then((res)=>{
        //关闭加载
        this.loading = false;
        //赋值展示数据
        this.AuditRecordsList = res.data.records;
        //赋值展示总行数
        this.queryParams.total = res.data.total;
        //弹出提示
        this.$message({message: '加载完成', type: 'success'});
      })
    },
    //重置查询方法
    refReshQuery(){
      //重置数据
      this.queryParams.auditDetails = "";
      this.queryParams.auditImg = "";
      this.queryParams.createBy = "";
      this.queryParams.updateBy = "";

      this.queryParams.userId = "";
    },
    //重置新增对象
    resetInsertObj(){
      this.insertObj.userId = "";
      this.insertObj.addWechatId = "";
      this.insertObj.auditType = "";
      this.insertObj.addStatus = "";
      this.insertObj.auditDetails = "";
      this.insertObj.auditImg = "";
    },
    //重置修改对象
    resetUpdateObj(){
      this.updateObj.userId = "";
      this.updateObj.addWechatId = "";
      this.updateObj.auditType = "";
      this.updateObj.addStatus = "";
      this.updateObj.auditDetails = "";
      this.updateObj.auditImg = "";
    },

    //删除方法
    deletingById(id){
      //调用api接口
      deleteAuditRecords(id).then((res)=>{
        //刷新表格
        this.getList();
        //弹出提示
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //新增弹窗打开方法
    openInsertDialog(){
      //数据重置
      this.resetInsertObj();
      //打开弹窗
      this.insertDialog = true;
      //标题
      this.title = "新增产品";
    },
    //打开修改弹窗
    openEditDialog(ele){
      //赋值
      this.updateObj = ele;
      if (this.updateObj.addStatus != null && this.updateObj.addStatus != ''){
        this.updateObj.addStatus = this.updateObj.addStatus.toString();
      }

      //打开弹窗
      this.updateDialog = true;
      //标题
      this.title = "修改产品";
    },
    //提交修改
    submitUpdate(){
      //调用修改接口
      updateAuditRecords(this.updateObj).then((res)=>{
        //刷新表格
        this.getList();
        //关闭弹窗
        this.updateDialog = false;
        //弹出错误提示
        this.$message({
          message: "修改成功",
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //提交新增
    submitInsert(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用api接口
          insertAuditRecords(this.insertObj).then((res)=>{
            //刷新表格
            this.getList();
            //关闭弹窗
            this.insertDialog = false;
          }).catch((error)=>{
            //弹出错误提示
            this.$message({
              message: error,
              type: 'error'
            });
          })
        }else{
          //弹出错误提示
          this.$message({
            message: "请将所有必填项进行填写",
            type: 'error'
          });
        }
      })
    },
    //页码更变
    handleCurrentChange(index){
      //赋值数据
      this.queryParams.current = index;
      //调用查询
      this.getList();
    },
    //行数更变
    handleSizeChange(size){
      //重置到第一行
      this.queryParams.current = 1;
      //赋值数据
      this.queryParams.size = size;
      //调用查询
      this.getList();
    }
  },
  created(){
    //获取集合
    this.getList();
  }
}
</script>
